<template>
  <div>
    <!-- swiper滑块 -->
    <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>

    <router-link to="/users">
      <h3>Welcome to my system...</h3>
    </router-link>
  </div>
</template>

<script >
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
};
</script>

<style lang="less" scoped>
.swiper-container {
    width: 600px;
    height: 300px;
}  
</style>